<template>
  <slide-view
    v-loading="loading"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%', background: 'white'}"
    class="d-view"
    @afterEnter="getDetail"
    @close="hideView">
    <flexbox
      v-if="detailData"
      direction="column"
      align="stretch"
      style="padding: 0 15px;"
      class="side-detail-main">
      <wk-detail-header
        :dropdown-items="dropdownItems"
        @command-select="commandSelect">
        <div slot="body" class="employee-header">
          <div class="employee-header__top">
            <span class="name">{{ detailData.reportName }}</span>
            <span class="post">{{ detailData.createUserName }}</span>
          </div>
          <div class="employee-header__bottom">

            <el-tooltip
              :content="`周期：${detailData.targetYear + '年' + detailData.targetMonth + '月第' + detailData.targetWeek + '周'}`"
              effect="dark"
              placement="top">
              <el-tag
                disable-transitions
                class="xr-tag"
                color="#ECEEF2"
                size="mini">
                <i class="wk wk-icon-time" />{{ detailData.targetYear + '年' + detailData.targetMonth + '月' + detailData.targetWeek + '周' }}
              </el-tag>
            </el-tooltip>

            <el-tooltip
              :content="`部门：${detailData.deptName|| '--'}`"
              effect="dark"
              placement="top">
              <el-tag
                disable-transitions
                class="xr-tag"
                color="#ECEEF2"
                size="mini">
                <i class="wk wk-icon-layer" />{{ detailData.deptName || '--' }}
              </el-tag>
            </el-tooltip>

            <el-tooltip
              :content="`创建时间：${detailData.createTime|| '--'}`"
              effect="dark"
              placement="top">
              <el-tag
                disable-transitions
                class="xr-tag"
                color="#ECEEF2"
                size="mini">
                <i class="wk wk-icon-time" />{{ detailData.createTime || '--' }}
              </el-tag>
            </el-tooltip>

            <el-tooltip
              :content="`提交状态：${getSubmitStatusName(detailData.submitStatus)}`"
              effect="dark"
              placement="top">
              <el-tag
                disable-transitions
                class="xr-tag"
                color="#ECEEF2"
                size="mini">
                <i class="wk wk-icon-status" />{{ getSubmitStatusName(detailData.submitStatus) || '--' }}
              </el-tag>
            </el-tooltip>

            <el-tooltip
              v-if="detailData.submitStatus == 1"
              :content="`提交时间：${detailData.submitTime|| '--'}`"
              effect="dark"
              placement="top">
              <el-tag
                disable-transitions
                class="xr-tag"
                color="#ECEEF2"
                size="mini">
                <i class="wk wk-icon-time" />{{ detailData.submitTime|| '--' }}
              </el-tag>
            </el-tooltip>
          </div>
        </div>
      </wk-detail-header>
      <el-tabs
        v-if="tabNames && tabNames.length > 0"
        v-model="tabCurrentName"
        class="side-detail__tabs--default">
        <el-tab-pane
          v-for="(item, index) in tabNames"
          :key="index"
          :label="item.label"
          :name="item.name"
          lazy>
          <component
            :is="item.name"
            :id="id"
            :periods="item.periods || ''"
            :type="item.type || ''"
            :status="detailData.submitStatus"
            class="side-detail-tabs-content"
            style="padding: 15px 10px;"
            @handle="relativeHandle"/>
        </el-tab-pane>
      </el-tabs>
    </flexbox>
    <form-add-dialog
      ref="formAdddialog"
      :title="formAddTitle"
      :form.sync="formAddForm"
      :rules="formAddRules"
      :fields="formAddFields"
      :visible.sync="formAddDialogShow"
      @pass="formAddPass"
    />
  </slide-view>
</template>

<script>
import { executionReportDetailAPI, executionReportDeleteAPI } from '@/api/oa/report'

import SlideView from '@/components/SlideView'
import ReportBrandInfo from './components/ReportBrandInfo'
import ReportInfo from './components/ReportInfo'
import ReportEnvironment from './components/ReportEnvironment'
import ThisReportStoreTaobao from './components/ReportStore'
import ThisReportStoreTiktok from './components/ReportStore'
import NextReportStoreTaobao from './components/ReportStore'
import NextReportStoreTiktok from './components/ReportStore'
import ReportLive from './components/ReportLive'
import ReportIssue from './components/ReportIssue'
import ReportKeywork from './components/ReportIssue'
import ReportMediaSign from './components/ReportMedia'
// import ReportMediaIncubation from './components/ReportMedia'
import ReportMediaIncubation from './components/ReportMediaIncubation'
import ReportMediaNext from './components/ReportMedia'
import ReportDocumentSign from './components/ReportDocument'
import ReportDocumentIncubation from './components/ReportDocument'
import ReportDocumentHot from './components/ReportDocument'
import FormAddDialog from './components/FormAddDialog'
import WkDetailHeader from '@/components/WkDetailHeader'

import { timeToFormatTime } from '@/utils'

export default {
  // 员工详情
  name: 'ReportDetail',
  components: {
    WkDetailHeader,
    SlideView,
    ReportBrandInfo,
    ReportInfo,
    ThisReportStoreTaobao,
    ThisReportStoreTiktok,
    ReportLive,
    FormAddDialog,
    ReportEnvironment,
    NextReportStoreTaobao,
    NextReportStoreTiktok,
    ReportIssue,
    ReportKeywork,
    ReportMediaSign,
    ReportMediaIncubation,
    ReportMediaNext,
    ReportDocumentSign,
    ReportDocumentIncubation,
    ReportDocumentHot
  },
  mixins: [],
  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },
  data() {
    return {
      loading: false, // 展示加载loading
      detailData: null,
      tabNames: [],
      brandTabNames: [
        { label: '基本信息', name: 'ReportInfo' },
        { label: '品牌汇总 & 月度目标', name: 'ReportBrandInfo' },
        { label: '外部环境', name: 'ReportEnvironment' },
        { label: '上周数据汇报（淘系）', name: 'ThisReportStoreTaobao', periods: 'LAST', type: 1 },
        { label: '上周数据汇报（抖店）', name: 'ThisReportStoreTiktok', periods: 'LAST', type: 2 },
        { label: '上周直播数据', name: 'ReportLive' },
        { label: '上周问题记录', name: 'ReportIssue', type: 1 },
        { label: '本周目标数据（淘系）', name: 'NextReportStoreTaobao', periods: 'THIS', type: 1 },
        { label: '本周目标数据（抖店）', name: 'NextReportStoreTiktok', periods: 'THIS', type: 2 }
      ],
      mediaTabNames: [
        { label: '基本信息', name: 'ReportInfo' },
        { label: '上周签约数据', name: 'ReportMediaSign', type: 1 },
        { label: '上周孵化数据', name: 'ReportMediaIncubation' },
        { label: '上周问题及解决方案', name: 'ReportIssue', type: 1 },
        { label: '本周孵化达人', name: 'ReportDocumentIncubation', type: 1 },
        { label: '本周新签达人', name: 'ReportDocumentSign', type: 2 },
        { label: '近期热门穿搭', name: 'ReportDocumentHot', type: 3 },
        { label: '本周目标计划', name: 'ReportMediaNext', type: 3 },
        { label: '本周重点工作', name: 'ReportKeywork', type: 2 }
      ],
      tabCurrentName: 'ReportInfo',
      // 弹窗添加
      formAddCommond: '',
      formAddTitle: '',
      formAddForm: {},
      formAddRules: {},
      formAddFields: [],
      formAddDialogShow: false
    }
  },

  computed: {
    dropdownItems() {
      if (this.detailData.submitStatus == 1) {
        return [{
          icon: 'wk wk-delete',
          label: '删除',
          command: 'delete'
        }]
      }
    }
  },
  watch: {
    id: {
      handler(val) {
        this.getDetail()
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    getDetail() {
      this.loading = true
      executionReportDetailAPI(this.id)
        .then(res => {
          this.loading = false
          const data = res.data || {}
          if (data.platform == 1) {
            this.tabNames = this.brandTabNames
          } else {
            this.tabNames = this.mediaTabNames
          }
          data.submitTime = timeToFormatTime(data.submitTime, 'Y-M-D HH:mm')
          data.createTime = timeToFormatTime(data.createTime, 'Y-M-D HH:mm')
          this.detailData = data
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 员工状态展示值
     */
    getSubmitStatusName(status) {
      if (status == 1) {
        return '暂存'
      } else {
        return '已提交'
      }
    },

    /**
     * 点击关闭按钮隐藏视图
     */
    hideView() {
      this.$emit('close')
    },

    /**
     * 更多操作
     */
    commandSelect(command) {
      this.formAddCommond = command
      if (command == 'delete') {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            executionReportDeleteAPI([this.id])
              .then(res => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.$emit('handle', { type: command })
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
    },

    /**
     * 相关模块的操作
     */
    relativeHandle(data) {
      this.$emit('handle', data)
    },

    /**
     * 勾选操作
     */
    formAddPass() {
      this.$refs.formAdddialog.loading = true
      this.formAddForm.employeeId = this.handleRowData.employeeId
      const request = null

      request(this.formAddForm).then(res => {
        this.$refs.formAdddialog.loading = false
        this.$message.success(`${this.formAddTitle}成功`)
        this.formAddDialogShow = false
        this.getTabsNum()
        this.getList()
      }).catch(() => {
        this.$refs.formAdddialog.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/side-detail.scss';

.employee-header {
  &__top {
    .name {
      font-weight: bold;
      font-size: 20px;
    }

    .post {
      font-size: 12px;
      font-weight: bold;
      margin-left: 8px;
    }
  }

  &__bottom {
    margin-top: 10px;
    .xr-tag {
      color: #42526E;
      border: none;
      /deep/ i {
        font-size: 12px;
        margin-right: 5px;
      }
    }

    .xr-sex-tag {
      border: none;
      /deep/ i {
        color: white;
        font-size: 12px;
      }

      &.is-man {
        background: #3875FF;
      }
      &.is-woman {
        background: #FF3838;
      }
    }
  }
}
</style>
